<%--
  Created by IntelliJ IDEA.
  User: tantaro
  Date: 2022/12/19
  Time: 11:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>查看商品</title>
    <link rel="stylesheet" href="./css/base.css" />
    <style type="text/css">
        /*全局选择器，控制字体大小统一，方便排版*/
        * {
            font-size: 16px;
        }

        /*控制main和top的颜色及尺寸，方便调节，后面可以再将背景色去掉*/
        #top {
            width: 1000px;
            height: 180px;
            /* background-color: #87CEEB; */
            margin: 0 auto;/*上下外边距为0，左右自动对齐（居中）*/
        }
        #main {
            width: 1000px;
            height: 500px;
            /* background-color: #DEB887; */
            margin: 0 auto;
        }

        /*top1的a与top3的a不同这里分别处理*/
        #top3 a{
            color: black;/*字体颜色黑色，由于文字都用a标签包裹，这里只能通过a标签精准调节，注意优先级*/
            text-decoration: none;/*下划线去掉*/
        }
        #top3 a:hover{
            text-decoration: underline;/*鼠标放上去显示下划线*/
        }

        /*分配top1、top2和top3全局*/

        #top3{
            height: 30px;
            border-radius: 5px;
            background-color: rgb(255, 197, 197);
            text-indent: 2em;
            line-height: 30px;
        }
        #top4{
            height: 40px;
            border-radius: 5px;
            border: 1px solid gainsboro;/*实心框线*/
            line-height: 40px;
            text-indent: 2em;
        }
        #top5{
            height: 40px;
            border-radius: 5px;
            border: 1px solid gainsboro;/*实心框线*/
            line-height: 40px;
            text-indent: 2em;
        }
        #top6{
            height: 40px;
            border-radius: 5px;
            border: 1px solid gainsboro;/*实心框线*/
            line-height: 40px;
            text-indent: 2em;
        }

        /*主体部分全局控制*/
        #main table p{
            font-size: 14.5px;
            line-height: 8px; /*控制行间距，也可以直接控制p标签的margin*/
            margin-bottom: 0; /*p标签自带的有外边距，这里需要将底部的margin去除，将外框和该标签底部的间距消除*/
        }
        #main table td{
            border: 1px solid gainsboro;
            padding:10px;/*内边距，图片文字距离父容器的距离*/
            border-radius: 5px;
        }

        /* #main img:hover{border:2px solid rgb(248, 185, 185); margin:2px;}  */

        .list-one-box {
            position: relative;
            display: inline-block;
            border: 1px;
            /* margin: 10px 10px; */
        }

        .find {
            /* 通过绝对定位 覆盖原图 */
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
            background-color: rgba(234, 130, 130, 0.4);
            font-size: 16px;
            color: #ffffff;
            /* 垂直居中 */
            display: flex;
            justify-content: center;
            /* 弹性布局的左右居中对齐 */
            align-items: center;
            /*弹性布局的垂直居中对齐*/
            text-align: center;
            /*文本居中*/
            display: none;
        }

        .list-one-box:hover .find {
            display: flex;
        }
    </style>
</head>
<body>
<div class="header">
    <ul>
        <li><a href="#">甜品商城后台</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">查看商品</a></li>
        <li><a href="#">商品销售</a></li>
        <li><a href="#">商品评价</a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a>管理员</a></li>
        <li><a href="#">退出</a></li>
    </ul>
</div>

<!--顶部-->
<div id="top">

    <!--顶部第三部分，左边相对图片的位置距离20px隔开-->
    <div id="top3">
        <a href="#">全部商品</a> | <a href="#">xx系列</a> | <a href="#">xx系列</a> | <a href="#">xx系列</a> | <a href="#">xx系列</a> | <a href="#">xx系列</a>
    </div>

    <!--顶部第四部分-->
    <div id="top4" style="margin-top: 3px;">
        <!--同样分为了两个部分-->
        <div style="float: left;">
            入库： <input type="text" name="price1"/> - <input type="text" name="price2"/>
        </div>
        <div style="float: right">
            <input type="checkbox" name="ck1" value="1" />全选
            <!-- <input type="checkbox" name="ck1" value="2" />删除
            <input type="checkbox" name="ck1" value="3" />修改 -->
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </div>

    <!--顶部第五部分-->
    <div id="top5" style="margin-top: 3px;">
        <!--同样分为了两个部分-->
        <div style="float: left;">
            销售： <input type="text" name="price3"/> - <input type="text" name="price4"/>
        </div>
        <div style="float: right">
            <input type="checkbox" name="ck1" value="1" />全选
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </div>

    <!--顶部第六部分-->
    <div id="top6" style="margin-top: 3px;">
        <!--同样分为了两个部分-->
        <div style="float: left;">
            余量： <input type="text" name="price5"/> - <input type="text" name="price6"/>
        </div>
        <div style="float: right">
            <input type="checkbox" name="ck1" value="1" />全选
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </div>
</div>

<!--主体部分（商品展示，这里使用表格）-->
<div id="main">
    <!--表格，宽度与浏览器宽度一致，列控制每列的宽度，复制后自适应数量-->
    <table width="100%">
        <!--两行五列-->
        <tr align="center">
            <td>
                <div class="list-one-box">
                    <img src="./img/new_goods_1.jpg" width="150px"/><br/>
                    <br>
                    <p style="color: orange;">入库:10</p>
                    <br>
                    <p style="color: rgb(255, 85, 0);">售出:5</p>
                    <br>
                    <p style="color: gray;">余量:5</p>
                    <!-- 查看商品信息 -->
                    <div class="find">
                        <p>查看商品详细信息 ></p>
                    </div>
                </div>
            </td>

            <td>
                <div class="list-one-box">
                    <img src="./img/new_goods_2.jpg" width="150px"/><br/>
                    <br>
                    <p style="color: orange;">入库:10</p>
                    <br>
                    <p style="color: rgb(255, 85, 0);">售出:8</p>
                    <br>
                    <p style="color: gray;">余量:2</p>
                    <!-- 查看商品信息 -->
                    <div class="find">
                        <p>查看商品详细信息 ></p>
                    </div>
                </div>
            </td>

            <td>
                <div class="list-one-box">
                    <img src="./img/new_goods_3.jpg" width="150px"/><br/>
                    <br>
                    <p style="color: orange;">入库:8</p>
                    <br>
                    <p style="color: rgb(255, 85, 0);">售出:4</p>
                    <br>
                    <p style="color: gray;">余量:4</p>
                    <!-- 查看商品信息 -->
                    <div class="find">
                        <p>查看商品详细信息 ></p>
                    </div>
                </div>
            </td>

            <td>
                <div class="list-one-box">
                    <img src="./img/new_goods_4.jpg" width="150px"/><br/>
                    <br>
                    <p style="color: orange;">入库:5</p>
                    <br>
                    <p style="color: rgb(255, 85, 0);">售出:2</p>
                    <br>
                    <p style="color: gray;">余量:3</p>
                    <!-- 查看商品信息 -->
                    <div class="find">
                        <p>查看商品详细信息 ></p>
                    </div>
                </div>
            </td>

            <td>
                <div class="list-one-box">
                    <img src="./img/2.jpg" width="150px"/><br/>
                    <br>
                    <p style="color: orange;">入库:5</p>
                    <br>
                    <p style="color: rgb(255, 85, 0);">售出:3</p>
                    <br>
                    <p style="color: gray;">余量:2</p>
                    <!-- 查看商品信息 -->
                    <div class="find">
                        <p>查看商品详细信息 ></p>
                    </div>
                </div>
            </td>
        </tr>
        <tr align="center">
            <td>
                <div class="list-one-box">
                    <img src="./img/圣诞1.jpg" width="150px"/><br/>
                    <br>
                    <p style="color: orange;">入库:6</p>
                    <br>
                    <p style="color: rgb(255, 85, 0);">售出:3</p>
                    <br>
                    <p style="color: gray;">余量:3</p>
                    <!-- 查看商品信息 -->
                    <div class="find">
                        <p>查看商品详细信息 ></p>
                    </div>
                </div>
            </td>

            <td>
                <div class="list-one-box">
                    <img src="./img/圣诞2.jpg" width="150px"/><br/>
                    <br>
                    <p style="color: orange;">入库:6</p>
                    <br>
                    <p style="color: rgb(255, 85, 0);">售出:6</p>
                    <br>
                    <p style="color: gray;">余量:0</p>
                    <!-- 查看商品信息 -->
                    <div class="find">
                        <p>查看商品详细信息 ></p>
                    </div>
                </div>
            </td>

            <td>
                <div class="list-one-box">
                    <img src="./img/圣诞3.jpg" width="150px"/><br/>
                    <br>
                    <p style="color: orange;">入库:1</p>
                    <br>
                    <p style="color: rgb(255, 85, 0);">售出:0</p>
                    <br>
                    <p style="color: gray;">余量:1</p>
                    <!-- 查看商品信息 -->
                    <div class="find">
                        <p>查看商品详细信息 ></p>
                    </div>
                </div>
            </td>

            <td>
                <div class="list-one-box">
                    <img src="./img/圣诞4.jpg" width="150px"/><br/>
                    <br>
                    <p style="color: orange;">入库:2</p>
                    <br>
                    <p style="color: rgb(255, 85, 0);">售出:2</p>
                    <br>
                    <p style="color: gray;">余量:0</p>
                    <!-- 查看商品信息 -->
                    <div class="find">
                        <p>查看商品详细信息 ></p>
                    </div>
                </div>
            </td>

            <td>
                <div class="list-one-box">
                    <img src="./img/圣诞5.jpg" width="150px"/><br/>
                    <br>
                    <p style="color: orange;">入库:5</p>
                    <br>
                    <p style="color: rgb(255, 85, 0);">售出:3</p>
                    <br>
                    <p style="color: gray;">余量:2</p>
                    <!-- 查看商品信息 -->
                    <div class="find">
                        <p>查看商品详细信息 ></p>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
